<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体-Tencent 腾讯</title>
    <link rel="shortcut icon" href="../fonts/bitbug_favicon.ico" />

    <link rel="stylesheet" href="./css/初始化.css">
    <link rel="stylesheet" href="./css/index-media.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/common1.css">
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/index-media.js"></script>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/common1.js"></script>
</head>

<body>
    <!-- 公共样式----头部导航栏制作开始 -->
    <div class="common-first">
        <div class="w common-nav">
            <!-- 头部logo制作 -->
            <div class="common-nav-logo">
                <a href="../index.html" class="common-logo">
                    <h1>Tencent腾讯</h1>
                </a>
            </div>
            <!-- 头部中间导航栏制作 -->
            <ul class="common-menu">
                <li class="menu-items">
                    <a href="./abstract.html" class="text">简介</a>
                    <ul class="menu-list">
                        <li><a href="./abstract.html#one">公司简介</a></li>
                        <li><a href="./abstract.html#seven">愿景及使命</a></li>
                        <li><a href="./abstract.html#two">发展历程</a></li>
                        <li><a href="./abstract.html#three">业务架构</a></li>
                        <li><a href="./abstract.html#four">管理团队</a></li>
                        <li><a href="./abstract.html#five">企业文化</a></li>
                        <li><a href="./abstract.html#six">办公地点</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./business.html" class="text">业务</a>
                    <ul class="menu-list">
                        <li><a href="./business.html#eight">面向用户</a></li>
                        <li><a href="./business.html#eight">面向企业</a></li>
                        <li><a href="./business.html#eight">创新科技</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./staff.html" class="text">员工</a>
                    <ul class="menu-list">
                        <li><a href="./staff.html#nine">人才发展</a></li>
                        <li><a href="./staff.html#show_pic2">腾讯学院</a></li>
                        <li><a href="./staff.html#staff_work_environment">工作环境</a></li>
                        <li><a href="./staff.html#staff-con-4">员工活动</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./duty.html" class="text">企业责任</a>
                    <ul class="menu-list">
                        <li><a href="./duty.html#ten">全球战疫</a></li>
                        <li><a href="./duty.html#eleven">践行承诺</a></li>
                        <li><a href="./duty.html#tweleve">支持善举</a></li>
                        <li><a href="./duty.html#lyh">鼓励创新</a></li>
                        <li><a href="./duty.html#lyh1">企业社会责任报告</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./index-investor.html" class="text">投资者</a>
                    <ul class="menu-list">
                        <li><a href="./index-investor.html#lyh10">财务新闻</a></li>
                        <li><a href="./index-investor.html#lyh11">公告及财务报告</a></li>
                        <li><a href="./index-investor.html#lyh12">业绩电话会及路演</a></li>
                        <li><a href="./index-investor.html#lyh13">投资者工具包</a></li>
                        <li><a href="./index-investor.html#lyh14">证券及债券信息</a></li>
                        <li><a href="./index-investor.html#lyh15">企业管治</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./index-media.htm" class="text">媒体</a>
                    <ul class="menu-list">
                        <li><a href="./index-media.htm#lyh20">企业动态</a></li>
                        <li><a href="./index-media.htm#lyh21">财务新闻</a></li>
                        <li><a href="./index-media.htm#lyh22">腾讯视角</a></li>
                        <li><a href="./index-media.htm#lyh23">媒体资料库</a></li>
                    </ul>
                </li>
            </ul>
            <!-- 头部右边字体栏目制作 -->
            <div class="common-chosefont">
                <a class="lang_ch current" lang="zh-cn">简</a>
                <i class="s_line">|</i>
                <a class="lang_hk" lang="zh-hk">繁</a>
                <i class="s_line">|</i>
                <a class="lang_en" lang="en-us">EN</a>
            </div>
        </div>
    </div>
    <!-- 公共样式----头部导航栏制作结束 -->


    <!-- banner图开始 -->
    <div class="banner1">
        <h2>媒体中心</h2>
        <img data-lazy-src="./images/media-1.jpg" alt="">
    </div>

    <!-- tap切换栏(锚点链接) -->
    <div class="tap">
        <div class="w">
            <ul>
                <li class="tz"><a href="javascript:;" class="xx1">企业动态</a></li>
                <li class="tz"><a href="javascript:;" id='tz2'>财务新闻</a></li>
                <li class="tz"><a href="javascript:;" id='tz3'>腾讯视角</a></li>
                <li class="tz"><a href="javascript:;" id='tz4'>媒体资料库</a></li>
                <li class="tz"><a href="javascript:;" id='tz5'>联系我们</a></li>
            </ul>

        </div>
    </div>

    <!-- 企业动态区域 -->
    <div class="dynamic mdd">


        <div class="heads w">
            <h3 id="lyh20">企业动态</h3>
            <a href="https://www.tencent.com/zh-cn/media/news.html" target="_blank">查看全部 ＞</a>
        </div>



        <div class="dynamic-box w">
            <div class="dynamic-box1">
                <a href="https://www.tencent.com/zh-cn/articles/2201168.html" target="_blank">
                    <img data-lazy-src="./images/dynamic-box1.png" alt="">
                    <h4>微信重塑梵高博物馆体验应对新常态</h4>
                    <p class="wxx">微信与梵高博物馆深化合作 助力全球博物馆重新构想未来</p>
                    <p class="date1">2012.6.27</p>
                </a>

            </div>
            <div class="dynamic-box2">
                <a href="https://www.tencent.com/zh-cn/articles/2201167.html" target="_blank">
                    <img data-lazy-src="./images/dynamic-box2.png" alt="">
                    <h4>腾讯公布在线视频BU战略愿景</h4>
                    <p class="wxx">2021年6月7日，腾讯视频影视年度发布在上海召开。</p>
                    <p class="date1">2012.6.27</p>
                </a>
            </div>
            <div class="dynamic-box3">
                <a href="https://www.tencent.com/zh-cn/articles/2201165.html" target="_blank">
                    <img data-lazy-src="./images/dynamic-box3.png" alt="">
                    <h4>腾讯云在曼谷、法兰克福、香港及东京设立四个全新数据中心</h4>
                    <p class="wxx">腾讯云于多个市场分别设立第二及第三个可用区，以满足全球客户对云服务与日俱增的需求。</p>
                    <p class="date1">2012.6.27</p>
                </a>
            </div>
        </div>
    </div>

    <!-- 财务新闻区域 -->
    <div class="finance mdd">
        <div class="heads w">
            <h3 id="lyh21">财务新闻</h3>
            <a href="https://www.tencent.com/zh-cn/investors/financial-news.html">查看全部 ＞</a>
        </div>

        <div class="news w">
            <div class="news1">
                <p class="news1-1">业绩新闻</p>


                <div class="news1-2">
                    <a href="https://static.www.tencent.com/uploads/2021/05/20/6e509b1bff6a6ebc6c7955f3426ff1b0.pdf">
                        <h3><a href="javascript:;">腾讯公布二零二一年第一季业绩</a></h3>
                        <p class="performance"><a href="javascript:;">业绩摘要 ＞</a></p>
                        <p class="dates"><a href="">2012.6.27</a></p>
                    </a>
                </div>



                <div class="news1-3">

                    <h3><a href="">腾讯公布二零二零年第四季及全年业绩</a></h3>
                    <p class="performance"><a href="javascript:;">业绩摘要 ＞</a></p>
                    <p class="dates"><a href="">2012.6.27</a></p>

                </div>


            </div>


            <div class="news2">
                <p class="news1-1">其他重大新闻</p>


                <div class="news1-2">

                    <h3><a href="javascript:;">腾讯发布新蓝图 “可持续社会价值创新”成为核..</a></h3>

                    <p class="dates"><a href="javascript:;">2012.6.27</a></p>


                </div>



                <div class="news1-3" style="margin-top: 70px;">
                    <h3><a href="javascript:;">腾讯根据全球中期票据计划发行41.5亿美元票...</a></h3>

                    <p class="dates"><a href="javascript:;" style="line-height: 30px;">2012.6.27</a></p>
                </div>
            </div>
        </div>

    </div>

    <!-- 腾讯视角 -->
    <div class="Tencents mdd">
        <div class="heads w">
            <h3 id="lyh22">腾讯视角</h3>
            <a href="https://www.tencent.com/zh-cn/articles/2201172.html">查看全部 ＞</a>
        </div>

        <div class="Tencents-box w">
            <a href="https://www.tencent.com/zh-cn/articles/2201172.html" target="_balnk"><img data-lazy-src="img\腾讯1.png" alt=""></a>
            <ul>
                <li>
                    <a href="https://www.tencent.com/zh-cn/articles/2201170.html" target="_blank">
                        <p>视障工程师帮助低视力人群扫除信息障碍</p>
                        <p>2012.06.27</p>
                    </a>
                </li>

                <li>
                    <a href="https://www.tencent.com/zh-cn/articles/2201170.html" target="_blank">
                        <p>#成才在腾讯：专注促进线上互联的精英团队</p>
                        <p>2012.06.27</p>
                    </a>
                </li>
                <li>
                    <a href="https://www.tencent.com/zh-cn/articles/2201170.html" target="_blank">
                        <p>#成才在腾讯：技术匠人，为科技注入生命</p>
                        <p>2012.06.27</p>
                    </a>
                </li>
                <li>
                    <a href="https://www.tencent.com/zh-cn/articles/2201170.html" target="_blank">
                        <p>游戏的无限可能</p>
                        <p>2012.06.27</p>
                    </a>
                </li>



            </ul>
        </div>


    </div>

    <!-- 媒体资料库部分 -->
    <div class="media mdd">
        <!-- 上面部分 -->
        <div class="media-tap">
            <div class="media-box1-1 w">
                <h3 id="lyh23">媒体资料库</h3>
                <ul>
                    <li>
                        <img data-lazy-src="./images/media-11.png" alt="">
                        <p>视频资料</p>
                    </li>
                    <li>
                        <img data-lazy-src="./images/media-22.png" alt="">
                        <p>企业图片</p>
                    </li>
                    <li>
                        <img data-lazy-src="./images/media-33.png" alt="">
                        <p>活动图集</p>
                    </li>
                </ul>
            </div>
        </div>



        <!-- 下面部分 -->
        <div class="media-body w">

            <!-- // 默认显示部分 1 -->
            <ul class="media-body-one ">
                <li>
                    <a href="javascript:;">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-1.jpg" alt="">
                        <p>视障工程师帮助低视力人群扫除信息障碍</p>
                    </a>

                </li>

                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-2.jpg" alt="">
                        <p>腾讯美国洛杉矶新办公室速览</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-3.jpg" alt="">
                        <p>腾讯在美国洛杉矶开设新办公室</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-4.jpg" alt="">
                        <p>腾讯新文创</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-5.jpg" alt="">
                        <p>腾讯新使命愿景：用户为本，科技向善</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-6.jpg" alt="">
                        <p>腾讯游戏：去发现，无限可能</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body1-7.jpg" alt="">
                        <p>腾讯微电影</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/media-body1-8.jpg" alt="">
                        <p></p>
                    </a>

                </li>
            </ul>


            <!-- 隐藏部分2 -->
            <ul class="media-body-one ">
                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-1.jpg" alt="">

                    </a>

                </li>

                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-2.jpg" alt="">

                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-3.jpg" alt="">

                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-4.jpg" alt="">

                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-5.jpg" alt="">

                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-6.jpg" alt="">

                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body2-7.jpg" alt="">

                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/media-body2-8.jpg" alt="">

                    </a>

                </li>
            </ul>

            <!-- 隐藏部分3 -->
            <ul class="media-body-one ">
                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-1.jpg" alt="">
                        <p>腾讯在美国洛杉矶开设新办公室</p>
                    </a>

                </li>

                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-2.jpg" alt="">
                        <p>2020全球电竞运动领袖峰会</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-3.jpg" alt="">
                        <p>2020微信公开课PRO</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-4.jpg" alt="">
                        <p>腾讯医学ME大会</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-5.jpg" alt="">
                        <p>腾讯科学WE大会2019</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-6.jpg" alt="">
                        <p>2019年99公益日</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/play-icon.png" alt="" class="play">
                        <img data-lazy-src="./images/media-body3-7.jpg" alt="">
                        <p>腾讯用户开放日(T-DAY)</p>
                    </a>

                </li>


                <li>
                    <a href="">
                        <img data-lazy-src="./images/media-body3-8.jpg" alt="">
                        <p></p>
                    </a>

                </li>
            </ul>


        </div>

    </div>

    <!-- 底部图片区域 -->
    <p style="height: 20px; background-color: #fbfbfb;"></p>
    <!-- <div class="banner-2 w" id='tx5'>
        <a href="">
            <h2><a href="#">联系我们</a></h2>
            <img data-lazy-src="img\botoom-bg.jpg" alt="">
            <p>媒体查询 →</p>
        </a>


    </div> -->

    <!-- 轮播图开始 -->
    <h2 class="qqbb w mdd">氪不氪以多充些Q币，我们之间有太多的回忆！</h2>
    <div class="swiper-container">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <img data-lazy-src="./images/腾讯2.jpg" alt="">
            </div>

            <div class="swiper-slide">
                <img data-lazy-src="./images/腾讯3.jpg" alt="">
            </div>

            <div class="swiper-slide">
                <img data-lazy-src="./images/腾讯4.jpg" alt="">
            </div>

            <div class="swiper-slide">
                <img data-lazy-src="./images/腾讯5.jpg" alt="">
            </div>

            <div class="swiper-slide">
                <img data-lazy-src="./images/media-tx.jpg" alt="">
            </div>

            <div class="swiper-slide">
                <img data-lazy-src="./images/botoom-bg.jpg" alt="">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <!-- <div class="swiper-button-next"></div> -->
        <!-- <div class="swiper-button-prev"></div> -->
    </div>


    <!-- 电梯导航栏 -->
    <div class="elevator">
        返回顶部 ↑
    </div>

    <script src="./js/EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            showTime: 1100,
            onLoadBackEnd: function(i, e) {
                console.log("onLoadBackEnd:" + i);
            },
            onLoadBackStart: function(i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>

    <!-- 公共样式----尾部信息栏制作开始 -->
    <div class="common-foot">
        <div class="w common-text">
            <!-- 关注我们栏目制作 -->
            <div class="focus-us">
                <h1>关注我们</h1>
                <ul>
                    <li>
                        <a href="javascript:;" class="wechat-code-btn">
                            <b class="icon wechat"></b>
                            <img class="wechat-code" src="images/wechat-code.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="javascript:;"><b class="icon weibo"></b></a></li>
                    <li><a href="javascript:;"><b class="icon twitter"></b></a></li>
                    <li><a href="javascript:;"><b class="icon mi"></b></a></li>
                </ul>
            </div>
            <!-- 加入我们制作 -->
            <div class="footer-center join-us">
                <div class="title">
                    <h3>加入我们</h3>
                </div>
                <ul>
                    <li><a href="javascript:;">社会招聘</a></li>
                    <li><a href="javascript:;">校园招聘</a></li>
                    <li><a href="javascript:;">国际招聘</a></li>
                </ul>
            </div>
            <!-- 联系我们制作 -->
            <div class="footer-center contact-us">
                <div class="title">
                    <h3>联系我们</h3>
                </div>
                <ul>
                    <li><a href="javascript:;">客户服务</a></li>
                    <li><a href="javascript:;">合作洽谈</a></li>
                    <li><a href="javascript:;">腾讯采购</a></li>
                    <li><a href="javascript:;">媒体及投资者</a></li>
                </ul>
            </div>
            <!-- 法律信息制作 -->
            <div class="footer-center law-meaasge">
                <div class="title">
                    <h3>法律信息</h3>
                </div>
                <ul>
                    <li><a href="javascript:;">服务协议</a></li>
                    <li><a href="javascript:;">隐私政策</a></li>
                    <li><a href="javascript:;">知识产权</a></li>
                </ul>
            </div>
            <!-- 尾部logo制作 -->
            <div class="footer-logo">
                <img src="images/tencent_logo.png" alt="Tencent腾讯">
            </div>
            <!-- 尾部企业信息制作 -->
            <div class="footer-company">
                <ul class="links">
                    <li>
                        <a href="javascript:;">法律声明</a>
                    </li>
                    <li>
                        <a href="javascript:;">阳光准则</a>
                    </li>
                    <li>
                        <a href="javascript:;">网站地图</a>
                    </li>
                    <li class="num">
                        <a href="javascript:;">粤网文【2017】6138-1456号</a>
                    </li>
                    <li class="num">
                        <a href="javascript:;">粤B2-20090059-1</a>
                    </li>

                </ul>
                <p class="copyright">Copyright © 1998 - 2021 Tencent. All Rights Reserved. 腾讯公司 版权所有</p>

            </div>
        </div>
    </div>
    <!-- 公共样式----尾部信息栏制作结束 -->
    <!-- 判断页面是否为上下滚动 -->
    <!-- 需求一: 当页面滚动在72到100之间的时候, common-first里面样式发生改变-->
    <!-- 需求: 当页面滚动>72且往下滚动的时候,common-first往上移动72px-->
    <!-- 需求: 当页面滚动>72且往上滚动的时候,common-first在往下移动72px,并修改样式-->
    <script>
        $(function() {
            function a() {
                $(".common-first").css("backgroundColor", "white");
                $(".common-menu").find("a").css("color", "black");
                $(".common-chosefont").find("a,i").css("color", "black");
                $(".common-nav-logo").find("h1").addClass("h1hover");
            }

            function moveWind() {
                var startScrollTop = document.body.scrollTop;
                window.addEventListener('scroll', function() {
                    var moveScrollTop = window.pageYOffset;
                    var moveLength = moveScrollTop - startScrollTop;
                    console.log(moveLength);
                    startScrollTop = moveScrollTop;
                    if (window.pageYOffset > 72) {
                        a();
                        console.log(12);
                        if (window.pageYOffset > 100) {
                            $(".common-first").css("marginTop", -72)
                            console.log(111);
                        }
                    }
                    if (moveLength === 0) {
                        console.log(false);
                    } else if (moveLength > 0) {
                        $(".common-first").css("marginTop", -72)
                    } else if (moveLength < 0) {
                        // console.log("up");
                        $(".common-first").css("marginTop", 0)
                        a();
                    };
                });
            }
            moveWind();
            /* if(window.pageYOffset === 0){
                        $(".common-first").css("backgroundColor","");
                        $(".common-menu").find("a").css("color","white");
                        $(".common-chosefont").find("a,i").css("color","white");
                        $(".common-nav-logo").find("h1").removeClass("h1hover");
            }; */
        })
    </script>

</body>